<v-app>
  <div v-resize="resize" style="user-select: none; touch-action: none;">
    <setting v-on:order="order"></setting>
    <viewport ref="viewport"></viewport>
    <v-btn
      fixed
      left
      top
      text
      color="primary"
      style="user-select: none; margin: 0%; padding: 0%;"
      :style="{height:size+'px', 'margin-left': width / 2 - Math.min(size*4, width/2 - size/4) + 'px'}"
      :ripple="false"
    >
      <div :style="{'font-size':(size * 0.5)+'px'}">{{score}}</div>
    </v-btn>
    <v-btn
      fixed
      block
      bottom
      text
      disabled
      style="user-select: none; margin: 0%; padding: 0%;"
      :style="{height:size+'px', 'margin-bottom': size * 1.5 + 'px'}"
      :ripple="false"
      v-show="key.length > 0"
    >
      <div :style="{'font-size':(size * 0.5)+'px'}">{{key}}</div>
    </v-btn>
    <v-container
      fluid
      grid-list-md
      text-xs-center
      :style="{width:Math.min(size * 8, width) + 'px', height:size * 1.5 + 'px'}"
      style="padding: 0%; touch-action: none;"
    >
      <v-layout row wrap>
        <v-flex xs12 style="display: flex;" :style="{'padding-left': size / 4 + 'px','padding-right': size / 4 + 'px'}">
          <v-btn @click="tap('scramble')" :style="style" text :ripple="false">
            <v-icon :size="size * 0.8">casino</v-icon>
          </v-btn>
          <v-btn @click="tap('history')" :style="style" text :ripple="false">
            <v-icon :size="size * 0.8">assignment</v-icon>
          </v-btn>
          <v-btn @click="tap('undo')" :style="style" text :ripple="false" :disabled="world.cube.history.length == 0">
            <v-icon :size="size * 0.8">backspace</v-icon>
          </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
    <v-dialog v-model="scrambled" :width="Math.min(size * 8, width)">
      <v-card>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px','padding-top':size/8+'px'}">
            重新打乱?
          </div>
        </v-card-title>
        <v-card-text style="text-transform: none; padding-bottom: 0%;">
          <v-textarea
            :style="{'font-size':size / 3 + 'px', 'line-height':size / 2 + 'px'}"
            auto-grow
            rows="1"
            solo
            flat
            outlined
            hide-details
            v-model="data.scrambler"
          >
          </v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs6 d-flex>
              <v-btn block color="error" text @click="scrambled = false;scramble();" :height="size * 0.8">
                <div :style="{'font-size':size/3+'px'}">确定</div>
              </v-btn>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block text @click="scrambled = false" :height="size * 0.8">
                <div :style="{'font-size':size/3+'px'}">取消</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="completed" :width="Math.min(size * 8, width)">
      <v-card>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px','padding-top':size/8+'px'}">
            复原成功!
          </div>
        </v-card-title>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs6 d-flex>
              <v-btn block text @click="completed = false;" :height="size * 0.8">
                <div :style="{'font-size':size/3+'px'}">确定</div>
              </v-btn>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block color="error" text @click="completed = false;tap('share');tap('open');" :height="size * 0.8">
                <div :style="{'font-size':size/3+'px'}">复盘</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="historyd" :width="Math.min(size * 8, width)">
      <v-card>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px'}">
            打乱:
          </div>
        </v-card-title>
        <v-card-text style="text-transform: none; padding-bottom: 0%;">
          <v-textarea
            :style="{'font-size':size / 3 + 'px', 'line-height':size / 2 + 'px'}"
            rows="4"
            no-resize
            solo
            flat
            outlined
            hide-details
            readonly
            v-model="data.scene"
          >
          </v-textarea>
        </v-card-text>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px'}">
            复原:
          </div>
        </v-card-title>
        <v-card-text style="text-transform: none;">
          <v-flex xs12 style="display: flex;" v-show="world.order==3">
            <v-btn depressed @click="adjust();" :height="size * 0.8" color="success" style="flex: 1;">
              <div :style="{'font-size':size/3+'px'}">整理</div>
            </v-btn>
            <v-btn depressed @click="niss();" :height="size * 0.8" color="error" style="flex: 1;">
              <div :style="{'font-size':size/3+'px'}">NISS</div>
            </v-btn>
          </v-flex>
          <v-textarea
            :style="{'font-size':size / 3 + 'px', 'line-height':size / 2 + 'px'}"
            rows="6"
            no-resize
            solo
            flat
            outlined
            hide-details
            readonly
            v-model="data.history"
          >
          </v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs12 style="display: flex;">
              <v-btn text @click="historyd = false;" :height="size * 0.8" style="flex: 1;">
                <div :style="{'font-size':size/3+'px'}">确定</div>
              </v-btn>
              <v-btn text @click="historyd = false;tap('share');" :height="size * 0.8" style="flex: 1;">
                <div :style="{'font-size':size/3+'px'}">分享</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="shared" :width="Math.min(size * 8, width)" eager>
      <v-card>
        <v-card-title style="text-transform: none;">
          <div :style="{'font-size':size * 0.4+'px','padding-top':size/8+'px'}">
            分享链接:
          </div>
        </v-card-title>
        <v-card-actions>
          <v-layout row wrap style="margin: 0%;">
            <v-flex xs12 d-flex>
              <v-textarea
                id="link"
                :style="{'font-size':size / 3 + 'px', 'line-height':size / 2 + 'px'}"
                solo
                flat
                outlined
                hide-details
                v-model="link"
              >
              </v-textarea>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block text @click="tap('open')" :height="size * 0.8">
                <div :style="{'font-size':size/3+'px'}">打开</div>
              </v-btn>
            </v-flex>
            <v-flex xs6 d-flex>
              <v-btn block text @click="shared = false;" :height="size * 0.8" data-clipboard-target="#link" ref="copy">
                <div :style="{'font-size':size/3+'px'}">复制</div>
              </v-btn>
            </v-flex>
          </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</v-app>
